<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./stylesheets/reset.css">
    <link rel="stylesheet" href="./stylesheets/lyjNav.css">
    <link rel="stylesheet" href="./stylesheets/bootstrap.css">
    <link rel="stylesheet" href="./stylesheets/jfspxq.css">
    <link rel="stylesheet" href="./stylesheets/swiper.min.css">
    <link href="http:////at.alicdn.com/t/font_1512981_qy3wz899e7.css" rel="stylesheet">
   
    <title>积分商品详情</title>
</head>
    <style>
        
        html,body{
            position: relative;
            width: 100%;
        }
    #lxcfooter{
        position: absolute;
        width: 100%;
        bottom: -1800px;
    }
    </style>
<body>
    <div id="lxcbox">
        <div id="lxcheader"></div>
        <div id="lxcsearch"></div>
    </div>
    <div class="navwrap clear">
        <div id="nav"></div>
        <div class="tradecate"></div>
    </div>
    <div id="top-bar">
        <ul class="breadcrumb">
            <li>您当前的位置:</li>
            <li><a href="#">全部商品</a></li>
            <li><a href="#">苹果</a></li>
            <li class="active">阿克苏</li>
        </ul>
    </div>
    <div class="xinxi">
        <div class="pingguo">
            <img src="./images/pingguo.jpg" alt="">
        </div>
        <div class="pg-xx">
            <div>
                <h4>新疆哈密瓜1500kg</h4>
            </div>

            <div class="xx-mid">
                <div class="xx-first">
                    <img src="./images/pg-xx.png" alt="">
                    <div class="xx-zsmj">
                        <p>资深买家</p>
                    </div>
                </div>

                <div class="xx-js">
                    <p>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在清宫剧中雍正出现的次数虽然没有乾隆爷那么多，但是也是不少的。关于雍正的爱恨情仇我们都比较熟悉了，但是对于雍正爷的书法作品，却很少出现在世人的面前。雍正爷其实操碎了心了，不过才57岁竟然累死在了皇位上，要知道与其他的皇帝比雍正绝对是短命的。
                    </p>
                </div>

            </div>
            <div class="xx-three">
                <div class="xx-three-one">
                    <span>500积分</span>
                    <span>价值：￥20.00</span>
                </div>
                <div class="xx-three-two">
                    <span>请选择规格</span>
                    <span class="five">500g</span>
                    <span class="five">1000g</span>
                    <span class="five">2000g</span>
                </div>
                <div class="xx-three-three">
                    <span>请选择规格</span>
                    <span class="five">500g</span>
                    <span class="five">1000g</span>
                </div>
                <div class="xx-three-four">
                    <span>数量</span>
                    <div class="input-one">
                        <input class="jian" type="button" name="" value="-">
                        <input class="jia" type="button" name="" value="+">
                        <strong class="num">1</strong>
                    </div>
                     <input class="duihuan" type="button" value="立即兑换">
                </div>
            </div>
        </div>
    </div>
    <div class="xx-bottom">
        <div class="xx-bottom-one">
            <img src="./images/left.png" alt="">
            <img src="./images/xxxc.png" alt="">
            <img src="./images/xxxc.png" alt="">
            <img src="./images/xxxc.png" alt="">
            <img src="./images/xxxc.png" alt="">
            <img src="./images/right.png" alt="">
        </div>
        <div class="xx-bottom-two">
            <a href=""><img src="./images/wujiaoxing1.png" alt=""></a>
            <a href=""><img src="./images/wujiaoxing2.png" alt=""></a>
            <span>收藏此商品</span>
            <span>分享到：</span>
            <a href=""><img src="./images/kongjian.png" alt=""></a>
            <a href=""><img src="./images/kongjian.png" alt=""></a>
            <a href=""><img src="./images/kongjian.png" alt=""></a>
            <a href=""><img src="./images/kongjian.png" alt=""></a>
        </div>
    </div>


    </div>
    <div id="js-xx">
        <div class="js-top">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#">商品详情</a></li>
                <li><a href="#">商品评价</a></li>
            </ul>
        </div>
        <div class="js-mid">
            <span>男士短衬衫</span>
            <p>明水礼盒是十分优秀的，送亲人，送朋友，都是不二人选</p>
            <p>明水礼盒是十分优秀的，送亲人，送朋友，都是不二人选,做这个页面的人真帅，明水礼盒是十分优秀的，送亲人，送朋友，都不二人选，业精于勤，荒于稀，业精于勤荒于稀</p>
            <p>明水礼盒是十分优秀的，送亲人，如果需要把标签改成胶囊的样式，只需要使用送朋友，都是不二人选,做这个页面的人真帅，明水礼盒是十分优秀的，送亲人，送朋友，都不二人选</p>
            <img src="./images/hamigua.jpg" alt="">
        </div>
        <div class="js-mid">
            <span>男士短衬衫</span>
            <p>明水礼盒是十分优秀的，送亲人，送朋友，都是不二人选</p>
            <p>明水礼盒是十分优秀的，送亲人，送朋友，都是不二人选,做这个页面的人真帅，明水礼盒是十分优秀的，送亲人，送朋友，都不二人选，业精于勤，荒于稀，业精于勤荒于稀</p>
            <p>明水礼盒是十分优秀的，送亲人，如果需要把标签改成胶囊的样式，只需要使用送朋友，都是不二人选,做这个页面的人真帅，明水礼盒是十分优秀的，送亲人，送朋友，都不二人选</p>
            <img src="./images/hamigua.jpg" alt="">
        </div>
        <div id="js-bottom">
            <ul class="nav nav-tabs">
                <li ><a href="#">商品详情</a></li>
                <li class="active"><a href="#">商品评价</a></li>
            </ul>
            <div class="js-pj">
                <div class="js-pj-left">
                    <img src="./images/touxiang.png" alt="">
                </div>
             <div class="js-pj-right">
                <img src="./images/wujiaoxing1.png" alt="">
                <img src="./images/wujiaoxing1.png" alt="">
                <img src="./images/wujiaoxing1.png" alt="">
                <img src="./images/wujiaoxing1.png" alt="">
                <img src="./images/wujiaoxing2.png" alt="">
                <p>帮同事买的，很不错，性价比高</p>
             </div>  
             <div id="js-tx">
                 <img src="./images/touxiang2.png" alt="">
                <img src="./images/touxiang2.png" alt="">
                <img src="./images/touxiang2.png" alt="">
                <img src="./images/touxiang2.png" alt="">
             </div>
            </div>
            <div class="js-pj">
                <div class="js-pj-left">
                    <img src="./images/touxiang.png" alt="">
                </div>
                <div class="js-pj-right">
                    <img src="./images/wujiaoxing1.png" alt="">
                    <img src="./images/wujiaoxing1.png" alt="">
                    <img src="./images/wujiaoxing1.png" alt="">
                    <img src="./images/wujiaoxing1.png" alt="">
                    <img src="./images/wujiaoxing2.png" alt="">
                    <p>帮同事买的，很不错，性价比高</p>
                </div>
                <!-- <div id="js-tx">
                    <img src="./images/touxiang2.png" alt="">
                    <img src="./images/touxiang2.png" alt="">
                    <img src="./images/touxiang2.png" alt="">
                    <img src="./images/touxiang2.png" alt="">
                </div> -->
            </div>
            <div class="js-pj">
                <div class="js-pj-left">
                    <img src="./images/touxiang.png" alt="">
                </div>
                <div class="js-pj-right">
                    <img src="./images/wujiaoxing1.png" alt="">
                    <img src="./images/wujiaoxing1.png" alt="">
                    <img src="./images/wujiaoxing1.png" alt="">
                    <img src="./images/wujiaoxing1.png" alt="">
                    <img src="./images/wujiaoxing2.png" alt="">
                    <p>帮同事买的，很不错，性价比高</p>
                </div>
                <div id="js-tx">
                    <img src="./images/touxiang2.png" alt="">
                    <img src="./images/touxiang2.png" alt="">
                    <img src="./images/touxiang2.png" alt="">
                    <img src="./images/touxiang2.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 尾部 -->
    <div id="lxcfooter">
        <div id="lxcfooter1"></div>
        <div id="lxcfooter2"></div>
        <div id="lxcbottom"></div>
    </div>
</body>

</html>
<script src="./javascripts/jquery-3.4.1.min.js"></script>
<script src="./javascripts/bootstrap.min.js"></script>
<script src="./javascripts/lxcheader.js"></script>
<script src="./javascripts/lyjNav.js"></script>
<script>
    $('.jia').on("click", function () {

        let num = $('.num').html();
        num++;
        $('.num').html(num);

    })
    $('.jian').on("click", function () {
        let num = $(".num").html();
        num--;
        if (num < 1) {
            num = 1;
        }
        $(".num").html(num);
    })


    $(".five").each(function(){
        this.onoff=true;
        $(this).click(function(){
            if(this.onoff){
                $(this).css('border','1px solid red');
                this.onoff=false;
            }else{
                $(this).css('border', '1px solid #e2e2e2');
                this.onoff=true;

            }
        })
    })
    // 兑换
    $('.duihuan').click(function () {
            location.href = "lxcshangjiabupeisong";
        })

    //  $("p").each(function () {
    //         this.onoff = true;
    //         $(this).click(function () {
    //             if (this.onoff) {
    //                 $(this).css('border', '1px solid red');
    //                 this.onoff = false;
    //             } else {
    //                 $(this).css('border', '1px solid #e2e2e2');
    //                 this.onoff = true;lxcshangjiabupeisong
    //             }
    //         });
    //     });
</script>